<template>
  <div id="hebei-map" ref="mapBox"></div>
</template>
  
  <script>
import * as echarts from "echarts";
import "./hebei"; // Ensure this file registers the map

export default {
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  created() {
    this.options = {
      tooltip: {
        trigger: "item"
      },
      geo: {
        map: "河北省",
        roam: true,
        itemStyle: {
          normal: {
            areaColor: "#0d0059",
            borderColor: "#389dff",
            borderWidth: 1,
            shadowBlur: 5,
            shadowOffsetY: 8,
            shadowOffsetX: 0,
            shadowColor: "#01012a"
          },
          emphasis: {
            areaColor: "#184cff",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 5,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      },
      series: [
        {
          map: "河北省",
          type: "map",
          aspectScale: 0.9,
          roam: false,
          label: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              borderColor: "#389dff",
              borderWidth: 0.5
            },
            emphasis: {
              areaColor: "#17008d",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.mapBox);
    this.chart.setOption(this.options);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>
  
  <style scoped>
#hebei-map {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  /* background-color: #b6bad8; */
}
</style>